<!-- 绩效考核指标详情 -->
<template>
<div class="quota-detail-wp">
  <el-form ref="form" :inline="true" :model="form" size="small" class="this-form">
    <el-form-item label="选择日期：">
      <el-date-picker
        v-model="form.time"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :clearable="false">
      </el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search">查询</el-button>
      <el-button @click="backRouter">返回</el-button>
    </el-form-item>
  </el-form>
  <div class="info-box">
    <div class="one c-flex c-col-top c-m-b-20">
      <div class="left c-flex-1">
        <p class="t1 c-m-b-20">指标名称：</p>
        <p class="p-between t1 c-m-b-20">
          <span class="label">1.门诊中药处方比例▲</span>
          <span class="value">36%</span>
        </p>
        <p class="p-between p1 c-m-b-20">
          <span class="label">门诊中药（含中药饮片和中成药）处方数</span>
          <span class="value">360例</span>
        </p>
        <p class="p-between p1 c-m-b-20">
          <span class="label">门诊处方总数</span>
          <span class="value">1000例</span>
        </p>
      </div>
      <div class="echart" ref="echart"></div>
    </div>
    <p class="t1 c-m-b-20">计算方法：</p>
    <p class="p-between p1 c-m-b-50">门诊中药（含中药饮片和中成药）处方数/门诊处方总数×100%。</p>
    <p class="t1 c-m-b-20">数据来源：</p>
    <p class="p1">门诊中药（含中药饮片和中成药）处方数来源XX表XX字段</p>
    <p class="p1">门诊处方总数来源XX表XX字段</p>
  </div>
</div>
</template>
<script>
export default {
  name: 'quota-detail',
  data () {
    return {
      form: {
        time: ['2022-02-01', '2022-02-18']
      },

      oEchart: null,
      myChart: null,
    }
  },
  mounted () {
    this.initEchart();
  },
  methods: {
    search () {

    },

    backRouter () {
      this.$router.back();
    },

    initEchart () {
      this.oEchart = this.$refs.echart;
      this.myChart = this.$echarts.init(this.oEchart);
      // this.myChart.showLoading();

      this.setOption();
    },

    setOption () {
      var option = {
        series: [
          {
            type: 'gauge',
            radius: '110%',
            center: ['50%', '80%'],
            startAngle: 180,
            endAngle: 0,
            axisLine: {
              lineStyle: {
                width: 10,
                color: [
                  [0.3, '#67e0e3'],
                  [0.7, '#37a2da'],
                  [1, '#fd666d']
                ]
              }
            },
            axisLabel: {
              color: 'auto',
              distance: -40,
              fontSize: 16
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            splitLine: {
              distance: -30,
              length: 10,
              lineStyle: {
                color: '#fff',
                width: 4
              }
            },
            pointer: {
              length: '60%',
              width: '6',
              itemStyle: {
                color: 'auto'
              }
            },
            detail: {
              fontSize: 18,
              offsetCenter: [0, '20%'],
            },
            data: [
              {
                value: 36,
              }
            ]
          }
        ]
      };

      // this.myChart.hideLoading();
      this.myChart.setOption(option);
    },

  }
}
</script>
<style lang="scss" scoped>
.quota-detail-wp {
  .this-form {
    padding: 0 0 22px;
  }
  .info-box {
    .mb20 {
      margin-bottom: 20px;
    }
    .mb50 {
      margin-bottom: 40px;
    }
    .one .left {
      padding-right: 100px;
    }
    .echart {
      width: 420px;
      height: 270px;
    }
    .t1 {
      font-size: 27px;
    }
    .p1 {
      font-size: 23px;
    }
    .p-between {
      display: flex;
      .label {
        flex: auto;
        padding-right: 20px;
      }
      .value {
        flex: none;
      }
    }
  }
}
</style>